<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡属性：标签样式发生变化时有动画效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: 2s;
			border-radius: 10px;
        }
		
		.box2{
			width: 100px;
			height: 100px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			background-color: aqua;
			margin-top: 10px;
			float: right;
		}
		
		.box3{
			background-image: url("../images/img01.png");
			background-repeat: no-repeat;
		}
        .box:hover{
            height: 200px;
            background-color: rgb(0, 234, 255);
            transform: translate(100px,100px);
        }
		
    </style>
</head>
<body>
    <div class="box">
    </div>
	<div class="box2"></div>
	<!-- 
	 
		/* 关键字 */
		background-size: cover
		background-size: contain
		
		/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
		background-size: 50%
		background-size: 3em
		background-size: 12px
		background-size: auto
		
		/* 两个值 */
		/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
		background-size: 50% auto
		background-size: 3em 25%
		background-size: auto 6px
		background-size: auto auto
		
		/* 逗号分隔的多个值：设置多重背景 */
		background-size: auto, auto     /* 不同于 background-size: auto auto */
		background-size: 50%, 25%, 25%
		background-size: 6px, auto, contain
		
		/* 全局属性 */
		background-size: inherit;
		background-size: initial;
		background-size: unset;
		
		display:block详解
		https://blog.csdn.net/qq_37787456/article/details/65628506
		
		1、每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
		
		
		2、块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
		
		     行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
		
		3、例子：链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

		
		
	 -->
</body>
</html>